<template>
  <!-- 子任务管理 -->
  <div style="position: relative;">
    <el-card style="height: calc( 100vh - 85px); overflow: auto">
      <!-- 信息搜索框 -->
      <el-form v-model="queryObj" label-width="100px" size="large">
        <el-row>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="任务来源：">
              <el-input v-model.trim="queryObj.taskFrom" placeholder="请输入任务来源" />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="子任务类型：">
              <el-input v-model="queryObj.subTaskType" placeholder="请选择子任务类型" />
              <!-- <el-select
              v-model="queryObj.subTaskType"
              style="width: 100%"
              placeholder="请选择子任务类型"
            >
              <el-option :value="1">1</el-option>
              <el-option :value="0">0</el-option>
            </el-select> -->
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="起始点：">
              <el-input v-model.trim="queryObj.fromLoc" placeholder="请输入起始点" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="目的点：">
              <el-input v-model.trim="queryObj.toLoc" placeholder="请输入目的点" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="容器编号：">
              <el-input v-model.trim="queryObj.unitId" placeholder="请输入容器编号" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="子任务ID：">
              <el-input v-model.trim="queryObj.subTaskId" placeholder="请输入子任务ID" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="任务状态：">
              <el-select v-model="queryObj.taskStatus" style="width: 100%" placeholder="请选择任务状态">
                <!-- <el-option
                v-for="item in form"
                :key="item.age"
                :value="item.age"
              >{{ item.age }}</el-option> -->
              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-show="isopen" :span="7" style="margin-right: 15px">
            <el-form-item label="plc名：">
              <el-input v-model.trim="queryObj.plcName" placeholder="请输入plc名" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px;">
            <el-form-item label="时间：">
              <el-date-picker v-model="timestart_end" style="width:100%" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy/MM/dd HH:mm:ss"
                value-format="yyyy/MM/dd HH:mm:ss" @change="handleDataChanged" range-separator="至" :default-time="['00:00:00', '23:59:59']" />
            </el-form-item>
          </el-col>

          <searchbutton :isopen="isopen" @isopenclickfn="isopenclick" @resetQueryfn="resetQuery" @queryClickfn="queryClick" />

        </el-row>
      </el-form>
      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom: 10px">
        <div style="float: left" />
        <div style="float: right">
          <div style="font-size: 30px; display: inline-block; margin-right: 5px">
            <a href="#">
              <el-tooltip class="item" effect="dark" content="列位置" placement="top" style="cursor:pointer">
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-grid el-icon--right" style="font-size:24px;color:black" />
                  </span>
                  <el-dropdown-menu slot="dropdown" style=" width:190px;height:300px;overflow:auto">
                    <el-dropdown-item><el-checkbox v-model="deleteCell.istaskSeq">taskSeq</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.issubTaskId">子任务编号</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isunitId">容器编号</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.istaskFrom">任务来源</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.issubTaskType">子任务类型</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.istaskStatus">任务状态</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isfromLoc">起始点</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.istoLoc">目的点</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isplcName">plc名</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iscreatedTime">创建时间"</el-checkbox></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-tooltip>
            </a>
          </div>
          <!-- 右侧公用按钮功能组件 -->
          <functionButton style="float:right" :refresh-click="refreshClick" :table-data="tableData" :table-data-all="tableDataAll" :headers-arr="headersArr" :headers-relations="headersRelations"
            @exportAllfn="exportAll" />
        </div>
      </el-row>

      <!-- 任务总表 -->
      <el-table v-if="tableData.taskSeq !== ''" ref="subTable" v-loading="listLoading" :data="tableData" border :row-style="{height:'40px'}" :cell-style="{padding:'0px'}"
        style="width: 100%;  margin-bottom: 10px;overflow:auto;font-size: 12px;">

        <el-table-column v-if="deleteCell.istaskSeq" prop="taskSeq" label="taskSeq" width="80" align="center" />
        <el-table-column v-if="deleteCell.issubTaskId" prop="subTaskId" label="子任务编号" min-width="100" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.isunitId" prop="unitId" label="容器编号" min-width="100" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.istaskFrom" prop="taskFrom" label="任务来源" width="100" />
        <el-table-column v-if="deleteCell.issubTaskType" prop="subTaskType" label="子任务类型" width="110" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.istaskStatus" prop="taskStatus" label="任务状态" width="120" />
        <el-table-column v-if="deleteCell.isfromLoc" prop="fromLoc" label="起始点" width="120" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.istoLoc" prop="toLoc" label="目的点" width="160" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.isplcName" prop="plcName" label="plc名" width="160" />
        <el-table-column v-if="deleteCell.iscreatedTime" prop="createdTime" label="创建时间" show-overflow-tooltip />
      </el-table>
      <!-- 分页组件 -->
      <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />
    </el-card>
  </div>
</template>

<script>
import { getsubtaskdataapi } from "@/api/task";
export default {
  name: "SubTaskPage",
  data() {
    return {
      queryObj: {
        taskSeq: "", // 序号
        subTaskId: "", // 子任务编号
        unitId: "", // 容器编号
        taskFrom: "", // 任务来源
        subTaskType: 0, // 子任务类型
        taskStatus: 0, // 任务状态
        fromLoc: "", // 起始点
        toLoc: "", // 目的点
        plcName: "", // plc名
        size: 5, // 每页显示条目个数
        page: 1, // 当前页数
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 开始日期结束日期的数组
      timestart_end: [],
      // 页面loding效果
      listLoading: true,
      isopen: false,
      // 分页的数据
      pagionObj: {
        size: 10,
        currentPage: 1,
        total: 100,
      },
      // 列位置 数据
      deleteCell: {
        istaskSeq: true,
        issubTaskId: true,
        isunitId: true,
        istaskFrom: true,
        issubTaskType: true,
        istaskStatus: true,
        isfromLoc: true,
        istoLoc: true,
        isplcName: true,
        iscreatedTime: true,
      },
      headersArr: [
        "taskSeq",
        "子任务编号",
        "容器编号",
        "任务来源",
        "子任务类型",
        "任务状态",
        "起始点",
        "目的点",
        "plc名",
        "创建时间",
      ],
      // 将表头转换成中文
      headersRelations: {
        taskSeq: "taskSeq",
        子任务编号: "subTaskId",
        容器编号: "unitId",
        任务来源: "taskFrom",
        子任务类型: "subTaskType",
        任务状态: "taskStatus",
        起始点: "fromLoc",
        目的点: "toLoc",
        plc名: "plcName",
        创建时间: "createdTime",
      },
    };
  },
  // 监听时间的变化
  watch: {
    timestart_end(newData) {
      if (newData !== null && newData.length > 0) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
  },
  mounted() {
    this.queryData();
    // console.log(this.$refs.subTable)
  },

  methods: {
    // 获取子任务数据
    async queryData() {
      this.listLoading = true;
      this.queryObj.size = this.pagionObj.size;
      this.queryObj.page = this.pagionObj.currentPage;
      const res = await getsubtaskdataapi(this.queryObj);
      this.tableData = res.data.data;
      this.pagionObj.pageCount = res.data.pageCount;
      this.pagionObj.total = res.data.count;
      this.listLoading = false;
    },

    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1;
      this.queryData();
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true;
      this.queryData();
      this.listLoading = false;
    },
    // 重置按钮
    resetQuery() {
      this.queryObj.taskSeq = "";
      this.queryObj.subTaskId = "";
      this.queryObj.unitId = "";
      this.queryObj.taskFrom = "";
      this.queryObj.subTaskType = "";
      this.queryObj.taskStatus = "";
      this.queryObj.fromLoc = "";
      this.queryObj.toLoc = "";
      this.queryObj.plcName = "";
      this.timestart_end = [];
    },

    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val;
      this.queryData();
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val;
      this.queryData();
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen;
    },
    // excel导出全部
    async exportAll() {
      const res2 = await getsubtaskdataapi({ size: 10000 });
      this.tableDataAll = res2.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
